<? include("/inc/header.html") {} ?>
<link rel="stylesheet" href="static/uploadify/uploadify.css" type="text/css"></link>
<script type="text/javascript" src="static/uploadify/jquery.uploadify.min.js"></script>
<script type="text/javascript" src="static/utf8-jsp/ueditor.config.js"></script>
<script type="text/javascript" src="static/utf8-jsp/ueditor.all.js"></script>
<script type="text/javascript" src="static/utf8-jsp/lang/zh-cn/zh-cn.js"></script>
<script type="text/javascript" src="static/utf8-jsp/third-party/video-js/video.js"></script>
<script type="text/javascript" src="static/My97DatePicker/WdatePicker.js"></script>
<style>
.row{
	margin-bottom: 10px;
}
</style>
<div class="col-lg-12" style="overflow: auto;height: 600px;">
	<div class="panel panel">
		<div class="panel-body pan">
			<div class="form-body pal">
				<div class="row">
					<label for="inputUsername" class="col-md-3 control-label">直播名称(只允许汉字、英文字母、数字及下划线,50字以内)<span
						class='require'>*</span> </label>
					<div class="col-md-9">
						<div class="input-icon">
							<input id="name" type="text" class="form-control"/>
						</div>
					</div>
				</div>
				<div class="row">
					<label for="inputUsername" class="col-md-3 control-label">所属网班
						<span class='require'>*</span> </label>
					<div class="col-md-9">
						<div class="input-icon">
							<select class="form-control" id="classesOnlineId">
									<option value="">全部</option>
									<!-- <option value="01">高中语文提分攻略</option>
									<option value="02">高中数学提分攻略</option> -->
								</select>
						</div>
					</div>
				</div>
				<div class="row">
					<label for="inputUsername" class="col-md-3 control-label">直播时间
						<span class='require'>*</span> </label>
					<div class="col-md-9">
						<div class="input-icon">
							<input id="zhiboDate" type="text" class="form-control" placeholder=" ~ " autocomplete="off" readonly="readonly"/>
						</div>
					</div>
				</div>
				<div class="row">
					<label for="inputUsername" class="col-md-3 control-label">是否直播
						<span class='require'>*</span> </label>
					<div class="col-md-9">
						<div class="input-icon">
							<select class="form-control" id="liveStatus">
									<option value="0">否</option>
									<option value="1">是</option>
								</select>
						</div>
					</div>
				</div>
				<div class="row">
					<label for="inputUsername" class="col-md-3 control-label">直播源
						<span class='require'>*</span> </label>
					<div class="col-md-9">
						<div class="input-icon">
							<input id="liveSource" type="text" class="form-control" />
						</div>
					</div>
				</div>
				<div class="row">
					<label for="inputUsername" class="col-md-3 control-label">课堂标签(长度限制在150个字符内)
						<span class='require'>*</span> </label>
					<div class="col-md-9">
						<div class="input-icon">
							<input id="tag" type="text" class="form-control" />
						</div>
					</div>
				</div>
				<div class="row">
					<label for="inputUsername" class="col-md-3 control-label">定价
						<span class='require'>*</span> </label>
					<div class="col-md-9">
						<div class="input-icon">
							<input id="price" type="text" class="form-control" />
						</div>
					</div>
				</div>
				<div class="row">
					<label for="inputUsername" class="col-md-3 control-label">封面图片
						<span class='require'>*</span> </label>
					<div class="col-md-9">
						<div >
							<div style="display:inline " id="cover"></div>
							<input type="button" class="btn btn-primary" style="width: 70px;height: 30px;padding: 0;background-color: #4cae4c;border-color: #4cae4c;" onclick="upImages()" value="上传图片"  />
							<textarea id="uploadImage" name="uploadImage" style="display: none;"></textarea>
							<input id="coverImg" type="hidden" class="form-control" value="" />
						</div>
					</div>
				</div>
				<div class="row">
					<label for="inputUsername" class="col-md-3 control-label">直播描述(200字符以内)
						<span class='require'>*</span> </label>
					<div class="col-md-9">
						<div class="input-icon">
							<textarea style="width: 100%;" rows="5" id="description"></textarea>
						</div>
					</div>
				</div>
				
			</div>
		</div>
	</div>
	<input type="hidden" id="id" value="${id}"/>
</div>
<script>
	$(function() {
		layui.use('laydate', function(){
		  var laydate = layui.laydate;
		  //执行一个laydate实例
		  laydate.render({
		     elem: '#zhiboDate' //指定元素
			  ,type: 'datetime'
			  ,range: '→'
		  });
		});
		
		_editor = UE.getEditor('uploadImage');
	    _editor.ready(function (){
	        //设置编辑器不可用(事实上不可以设置不可用...所以注释掉,以观后效)
	        _editor.setDisabled();
	        //隐藏编辑器,因为只使用上传功能
	        _editor.hide();
	        //侦听图片上传
	  	 	_editor.addListener('beforeInsertImage',function(t,arg){
	  	 			for(var i=0;i<arg.length;i++){
	  	 				var urlPath = arg[i].src;
	  	 				$("#coverImg").val(urlPath);
						$("#cover").html("<a href="+urlPath+" download='w3logo'><img src='"+urlPath+"' width='30' height='30' /></a>");
	  	 			}
	        });
	        //侦听文件上传
		   	 _editor.addListener('afterUpfile',function(t,arg){
		   	 	
		   	 });
	   });
		getClassesOnline();
	});
function getClassesOnline(){
	$.ajax({
			type : "post",
			url : "./classesOnlineListPass.do",
			dataType : "json",
			success : function(data) {
				var html='<option value="">---请选择---</option>';
				for(var i=0;i<data.length;i++){
					html+='<option value="'+data[i].id+'">'+data[i].name+'</option>';
				}
				$("#classesOnlineId").html(html);
				init();
			},
			error : function(data) {
				alert("请求失败");
			}
		});
}

function init(){
	if($("#id").val() != null 
		&& $("#id").val() != ''
		&& $("#id").val() != 'null'
		&& $("#id").val() != 'undefined'
		&&$("#id").val() != undefined){
		$.ajax({
			type : "post",
			url : "./liveFind.do",
			data : {
				"id" : $("#id").val(),	
			},
			dataType : "json",
			success : function(data) {
				$("#name").val(data[0].name);
				$("#classesOnlineId").val(data[0].classesOnlineId);
				$("#liveSource").val(data[0].liveSource);
				$("#tag").val(data[0].tag);
				$("#price").val(data[0].price);
				$("#zhiboDate").val(data[0].liveStart+" → "+data[0].liveEnd);
				$("#description").val(data[0].description);
				$("#coverImg").val(data[0].cover);
				$("#liveStatus").val(data[0].liveStatus);
				$("#cover").html("<a href="+data[0].cover+" download='w3logo'><img src='"+data[0].cover+"' width='30' height='30' /></a>");
			},
			error : function(data) {
				alert("请求失败");
			}
		});
	}
	
}	
	
function save(){
	var id;
	if($("#id").val() != null 
		&& $("#id").val() != ''
		&& $("#id").val() != 'null'
		&& $("#id").val() != 'undefined'
		&&$("#id").val() != undefined){
		id=$("#id").val();
	}
	var zhiboDate=$("#zhiboDate").val();
	var liveStart=zhiboDate.split("→")[0];
	var liveEnd=zhiboDate.split("→")[1];
	
	if($("#name").val()==''){
		layer.msg("请输入直播名称");
		return false;
	}
	
	var name=$("#name").val(); //    
    var re =/^[\u4e00-\u9fa5_a-zA-Z0-9]{1,50}$/;
	if (!re.test(name)) {
		layer.msg('直播名称:只允许汉字、英文字母、数字及下划线。50字以内');
		return null;
	}
	
	if($("#classesOnlineId").val()==''){
		layer.msg("请选择所属网班");
		return false;
	}
	if($("#liveSource").val()==''){
		layer.msg("请输入直播源");
		return false;
	}
	if($("#tag").val()==''){
		layer.msg("请输入课堂标签");
		return false;
	}
	if($("#tag").val().length>150){
		layer.msg("标签:150字以内");
		return false;
	}
	
	if($("#price").val()==''){
		layer.msg("请输入定价");
		return false;
	}
	
	var price=$("#price").val(); //    
    var re =/^[0-9]+$/;
	if (!re.test(price)) {
		layer.msg('排序:输入在0-9999之间的整数！');
		return null;
	}
	var num = parseInt(price);
	if(num>9999 || num<0){
		layer.msg('排序:输入在0-9999之间的整数！');
		return null;
	}
	
	if($("#coverImg").val()==''){
		layer.msg("请上传封面图片");
		return false;
	}
	if($("#description").val()==''){
		layer.msg("请输入直播描述");
		return false;
	}
	
	if($("#description").val().length>200){
		layer.msg("题库描述:200字以内 ");
		return false;
	}
	
	if($("#zhiboDate").val()=='' || liveStart=='' || liveEnd==''){
		layer.msg("请输入直播时间");
		return false;
	}
	
	$.ajax({
		type : "post",
		url : "./liveAddUpdate.do",
		data : {
			"id" : id,
			"name" : $("#name").val(),
			"classesOnlineId" : $("#classesOnlineId").val(),
			"price" : $("#price").val(),
			"description" : $("#description").val(),
			"tag" : $("#tag").val(),
			"liveSource" : $("#liveSource").val(),
			"liveStart" : $.trim(liveStart),
			"liveEnd" : $.trim(liveEnd),
			"cover" : $("#coverImg").val(),
			"liveStatus" : $("#liveStatus").val(),
		},
		dataType : "json",
		success : function(data) {
			if(data[0].result == 'success'){
				var index = parent.layer.getFrameIndex(window.name);
				window.parent.get();
				parent.layer.msg('提交成功');
				parent.layer.close(index);
			}else{
				parent.layer.msg(data[0].msg);
			}
		},
		error : function(data) {
			alert("请求失败");
		}
	});
}

//上传图片
function upImages() {
	var myFiles = _editor.getDialog("insertimage");
  		myFiles.open();
}
 //上传文件
function upFiles() {
	var myFiles = _editor.getDialog("attachment");
   	myFiles.open();
}
</script>